<template>
	<view class="container">
		<!-- 左上角X号按钮 -->
		<view class="close-btn" @click="handleClose">
			<text class="x-icon">×</text>
		</view>
		<!-- 页面内容 -->
		<view class="page-content">
			<view class="title">手机号登录</view>
			<view class="form-box">
				<view class="form-row">
					<view class="label">手机号</view>
					<input class="input" v-model="phone" type="number" placeholder="请填写手机号码"
						placeholder-class="input-placeholder" />
				</view>
				<view class="form-row">
					<view class="label">密码</view>
					<input class="input" v-model="password" type="password" placeholder="请设置密码"
						placeholder-class="input-placeholder" />
				</view>
			</view>
			<view class="other-login">
				<text class="other-login-link" @click="SMSlogins">用短信验证登录</text>
			</view>
		</view>
		<view class="content-bottom">
			<button class="submit-btn" @click="handleLogin">登录</button>
			<view class="bottom-links">
				<text class="bottom-link">找回密码</text>
				<text class="divider">｜</text>
				<text class="bottom-link">冻结账号</text>
				<text class="divider">｜</text>
				<text class="bottom-link">更多</text>
			</view>
		</view>
	</view>
</template>

<script>
	import request from "@/utils/request.js";
	import userStatusService from "@/utils/userStatusService.js";
	
	export default {
		data() {
			return {
				phone: "",
				password: "",
			};
		},
		mounted() {
			// 获取路由参数或本地缓存
			const query = this.$root.$mp.query || {};
			this.phone = query.phone || uni.getStorageSync("regPhone") || "";
		},
		methods: {
			// X号按钮点击事件
			handleClose() {
				// 这里可以根据需求实现关闭逻辑
				// 例如返回上一页
				uni.navigateBack({
					delta: 1,
				});
			},
			//跳转验证码登录
			SMSlogins() {
				uni.navigateTo({
					url: '/pages/SMSlogin/SMSlogin'


				})
			},

			// 修改后的login方法
			async handleLogin() {
			  if (!this.phone) {
			    uni.showToast({ title: "请输入手机号", icon: "none" });
			    return;
			  }
			  
			  // 手机号格式校验
			  const phoneReg = /^1\d{10}$/;
			  if (!phoneReg.test(this.phone)) {
			    uni.showToast({ title: "请输入正确的手机号", icon: "none" });
			    return;
			  }
			  
			  //密码
			  if (!this.password) {
			    uni.showToast({ title: "请输入密码", icon: "none" });
			    return;
			  }
			  
			  try {
			    // 发送登录请求到后端
			    const res = await request({
			      url: "/auth/login",
			      method: "POST",
			      data: { phone: this.phone, password: this.password }
			    });
			    
			    console.log('登录响应:', res);
			    
			    // 保存accessToken和refreshToken到本地存储
			    if (res && res.data && res.data.accessToken && res.data.refreshToken) {
			      // 保存token
			      uni.setStorageSync('accessToken', res.data.accessToken);
			      uni.setStorageSync('refreshToken', res.data.refreshToken);
			      
			      // 保存用户信息到本地存储的userInfo键中
			      const userInfo = {
			        id: res.data.id,
			        username: res.data.username,
			        phone: this.phone,
			        avatar: res.data.avatarUrl // 使用默认头像
			      };
			      uni.setStorageSync('userInfo', JSON.stringify(userInfo));
			      
			      uni.showToast({ title: '登录成功', icon: 'success' });
			      
			      // 登录成功后跳转到我的页面并初始化WebSocket
			      setTimeout(() => {
			        // 登录成功后才初始化WebSocket连接
			        userStatusService.initWebSocket();
			        uni.switchTab({ url: "/pages/my/my" });
			      }, 1000);
			    } else {
			      uni.showToast({ title: '登录失败：' + (res?.message || '未知错误'), icon: 'none' });
			    }
			  } catch (error) {
			    console.error('登录错误:', error);
			    uni.showToast({ title: '网络错误，请重试', icon: 'none' });
			  }
			}
		},
	};
</script>

<style scoped>
	.container {
		/* 确保内容不会被导航栏遮挡 */
		padding: 44px 20px 0 20px;
		background: #fff;
		min-height: 100vh;
		box-sizing: border-box;
	}

	/* X号按钮样式 */
	.close-btn {
		width: 30px;
		height: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.x-icon {
		font-size: 24px;
		color: #333333;
		line-height: 1;
	}

	.page-content {
		padding: 16px;
	}

	.title {
		text-align: center;
		font-size: 22px;
		font-weight: 500;
		margin: 24px 0 32px 0;
		color: #222;
	}

	.form-box {
		background: #fff;
		border-radius: 8px;
		padding: 0 0 8px 0;
		margin-bottom: 24px;
	}

	.form-row {
		display: flex;
		align-items: center;
		padding: 0 0 0 0;
		height: 48px;
		border-bottom: 1px solid #f2f2f2;
	}

	.label {
		width: 80px;
		color: #222;
		font-weight: 400;
		font-size: 15px;
	}

	.country {
		flex: 1;
		color: #888;
		font-size: 15px;
	}

	.country-code {
		color: #888;
		font-size: 14px;
		margin-left: 2px;
	}

	.input {
		flex: 1;
		border: none;
		outline: none;
		background: transparent;
		font-size: 15px;
		color: #222;
		padding: 0;
	}

	.input-placeholder {
		color: #bbb;
		font-size: 15px;
		/* margin-left: 30px; */
	}

	.other-login {
		text-align: left;
		margin-top: 8px;
	}

	.other-login-link {
		color: #4a90e2;
		font-size: 14px;
		text-decoration: none;
		cursor: pointer;
	}

	.content-bottom {
		margin-top: 17.25rem;
	}

	.phone-tip {
		color: #bbb;
		font-size: 13px;
		text-align: center;
		margin: 32px 0 16px 0;
	}

	.submit-btn {
		width: 80%;
		margin: 0 auto;
		display: block;
		background: #1aad19;
		color: #fff;
		font-size: 17px;
		border: none;
		border-radius: 4px;
		height: 44px;
		line-height: 44px;
		text-align: center;
		margin-bottom: 32px;
	}

	.bottom-links {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 16px;
		color: #888;
		font-size: 14px;
	}

	.bottom-link {
		color: #4a90e2;
		margin: 0 4px;
		cursor: pointer;
	}

	.divider {
		color: #bbb;
		margin: 0 2px;
	}
</style>